﻿@{
    ViewBag.Title = "RichBox";
}
@section Head{
    <link href="@Url.Content("~/Ueditor/themes/default/ueditor.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Ueditor/editor_config.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Ueditor/editor_all.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var ue = new UE.ui.Editor({});
            ue.render('editor');
            ue.addListener("selectionchange", function () {
                var state = ue.queryCommandState("source");
                var btndiv = document.getElementById("btns");
                if (btndiv && state == -1) {
                    disableBtn("enable");
                }
            });
        });
        function getAllHtml() {
            alert(ue.getAllHtml())
        }
        function getContent() {
            var arr = [];
            arr.push("使用editor.getContent()方法可以获得编辑器的内容");
            arr.push("内容为：");
            arr.push(ue.getContent());
            alert(arr.join("\n"));
        }
        function getPlainTxt() {
            var arr = [];
            arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
            arr.push("内容为：");
            arr.push(ue.getPlainTxt());
            alert(arr.join('\n'))
        }
        function setContent() {
            var arr = [];
            arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
            ue.setContent('欢迎使用ueditor');
            alert(arr.join("\n"));
        }
        function setDisabled() {
            ue.setDisabled('fullscreen');
            disableBtn("enable");
        }

        function setEnabled() {
            ue.setEnabled();
            enableBtn();
        }

        function getText() {
            //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
            var range = ue.selection.getRange();
            range.select();
            var txt = ue.selection.getText();
            alert(txt)
        }

        function getContentTxt() {
            var arr = [];
            arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
            arr.push("编辑器的纯文本内容为：");
            arr.push(ue.getContentTxt());
            alert(arr.join("\n"));
        }
        function hasContent() {
            var arr = [];
            arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
            arr.push("判断结果为：");
            arr.push(ue.hasContents());
            alert(arr.join("\n"));
        }
        function setFocus() {
            ue.focus();
        }
        function deleteEditor() {
            disableBtn();
            ue.destroy();
        }
        function disableBtn(str) {
            var div = document.getElementById('btns');
            var btns = domUtils.getElementsByTagName(div, "input");
            for (var i = 0, btn; btn = btns[i++]; ) {
                if (btn.id == str) {
                    domUtils.removeAttributes(btn, ["disabled"]);
                } else {
                    btn.setAttribute("disabled", "true");
                }
            }
        }
        function enableBtn() {
            var div = document.getElementById('btns');
            var btns = domUtils.getElementsByTagName(div, "input");
            for (var i = 0, btn; btn = btns[i++]; ) {
                domUtils.removeAttributes(btn, ["disabled"]);
            }
        }
    </script>
}
<h3>@ViewBag.Message</h3>
<div id="content">
    <script type="text/plain" id="editor" style="width:100%;">
    </script>
    <div class="clear">
    </div>
    <div id="btns">
        <input type="button" value="获得整个html的内容" onclick="getAllHtml()">
        <input type="button" value="获得内容" onclick="getContent()">
        <input type="button" value="写入内容" onclick="setContent()">
        <input type="button" value="获得纯文本" onclick="getContentTxt()">
        <input type="button" value="获得带格式的纯文本" onclick="getPlainTxt()">
        <input type="button" value="判断是否有内容" onclick="hasContent()">
        <input type="button" value="使编辑器获得焦点" onclick="setFocus()">
        <input type="button" value="获得当前选中的文本" onclick="getText()" />
        <input type="button" value="删除编辑器" onclick="deleteEditor()" />
        <input id="enable" type="button" value="可以编辑" onclick="setEnabled()" />
        <input type="button" value="不可编辑" onclick="setDisabled()" />
        <input type="button" value="隐藏编辑器" onclick="ue.setHide()" />
        <input type="button" value="显示编辑器" onclick="ue.setShow()" />
    </div>
</div>
